
<style type="text/css">
.eraAccordion {
    float: left;
    margin-right: 50px;
}
    .eraAccordion .yui-cms-accordion .yui-cms-item {
        width: 250px;
    }
    
    .accordionToggleItem {
       display: block;
    }
    
    .addZone {
     width: 90%;
     border: solid 1px black;
     padding: 5px 5px 5px 10px;
     border-top: none;
     margin: auto;
     }
     .zone {
       padding: 5px;
    }
</style>



<!--  This is specific to this file only -->
<script type="text/javascript">

// Should be able to use saveRow for this if done right
function saveZone( form ) {
   var myCallback = callback;
   myCallback.setForm(form);
   myCallback.processSuccess = function (json) {
      addZoneToEra(json);
      YAHOO.util.Selector.query('input[type="text"]', this.form, true).value = '';
      YAHOO.util.Selector.query('input[type="text"]', this.form, true).blur();
   };
   
   var cObj = YAHOO.util.Connect.asyncRequest('POST', form.action, myCallback); 
   
   /* Because different browsers are screwy with memory, I'm cleaning it up */
   myCallback = form = cObj = null;
   
   return false;
}

function saveEra( form ) {

   var myCallback = callback;
   myCallback.setForm(form);
   myCallback.processSuccess = function (json) {
      addEra(json);
      YAHOO.util.Selector.query('input[type="text"]', this.form, true).value = '';
      YAHOO.util.Selector.query('input[type="text"]', this.form, true).blur();
   };
   
   var cObj = YAHOO.util.Connect.asyncRequest('POST', form.action, myCallback); 
   
   /* What was once full is now empty */
   myCallback = form = cObj = null;
   
   return false;
}

function addEra( json ) {

   var eraList = document.getElementById('eraList');
   var newEra = YAHOO.util.Dom.get('era_tmp').cloneNode(true);
   //YAHOO.util.Dom.addClass(newEra, 'selected');
   
   // New era is created, now clone the last one in the list and make all required changes
   newEra.id = 'era_' + json.id;
   newEra.style.removeProperty('display');
   
   YAHOO.util.Selector.query('div.hd a', newEra, true).innerHTML = json.name;
   YAHOO.util.Selector.query('form', newEra, true).action = "/admin/zone/add/zone_era/" + json.id;
   //YAHOO.util.Selector.query('form input[name=zone_name]', newEra, true).value = 'Add zone to ' + json.name;
   YAHOO.util.Selector.query('div.bd div.fixed', newEra, true).id = 'era_'+json.id+'_zones';
   YAHOO.util.Selector.query('div.bd div.fixed', newEra, true).innerHTML = '';
   
   link = YAHOO.util.Selector.query('div.actions a.accordionRemoveItem', newEra, true);
   link.onclick = function() { return deleteRow('era', json.id); };
   
   eraList.appendChild(newEra);
   
   /* Be kind and rewind memory */
   link = newEra = eraList = null;
   
   return false;
}

/* {"eras_id":"80","name":"Test","success":true,"id":"21"} */
function addZoneToEra(json) {
   
   /*
            <div class="zone (odd|even)" id="zone_{zone_id}">
               <span style="float: right"><a href="#"><img 
                 id="zone_{zone_id}_img" onclick="deleteRow('zone', {zone_id})" src="/tools/images/delete_16.png" border="0" height="16" width="16" /></a> </span>
               <span>{zone_name}</span>
            </div>
   */   
   
   div = document.createElement('div');
   YAHOO.util.Dom.addClass(div, 'zone');
   div.id = 'zone_' + json.id;
   
   spanLink = document.createElement('span');
   spanLink.style.setProperty('float', 'right', null);
   
   a = document.createElement('a');
   a.href = '/admin/zone/delete/id/' + json.id;
   img = document.createElement('img');
   img.id = 'zone_' + json.id + '_img';
   img.onclick = function(e) { return deleteRow('zone', json.id); };
   img.src = '/tools/images/delete_16.png';
   img.border = 0;
   
   a.appendChild(img);
   spanLink.appendChild(a);
   
   /* Inny */
   a = img = null;
   
   spanName = document.createElement('span');
   spanName.innerHTML = json.name;
   
   div.appendChild(spanLink);
   div.appendChild(spanName);
   
   /* Minny */
   spanLink = spanName = null;
   
   zoneList = document.getElementById('era_' + json.eras_id + '_zones');
   
   // Properly alternate the colours!
   lastChild = YAHOO.util.Dom.getLastChild(zoneList);
   
   if ( lastChild != null ) {
      class = lastChild.getAttribute('class');
      if ( class.search(/odd/) != -1 )  {
         YAHOO.util.Dom.addClass(div, 'even');
      } else {
         YAHOO.util.Dom.addClass(div, 'odd');
      }
      class = null; /* Moo */
   } else {
      YAHOO.util.Dom.addClass(div, 'even');
   }
   
   zoneList.appendChild(div);
   
   /* You are deleted */
   lastChild = div = null;
   
   return false;
}

</script>

Zones

<div class="toonStatForm">
<? $urlOptions = array ('module' => 'admin', 'controller' => 'era', 'action' => 'add'); ?>
<form id="eraForm" action="<?= $this->url($urlOptions) ?>" onSubmit="return saveEra(this);" method="post">
   <div class="addEra" style="width: 395px; padding: 3px;">
      <span style="float: right"><input type="submit" value="+" name="eraSubmit" id="eraSubmit" /></span>
      <span class="form"><?= $this->formText('era_name', 'Add Era', array('size' => 30, 'onfocus'=>"check_focus(this, 'Add Era')", 'onblur'=>"check_blur(this, 'Add Era')" )); ?></span>
   </div>
</form>
<br />


<? $urlOptions = array ('module' => 'admin', 'controller' => 'zone', 'action' => 'add'); ?>
<div class="yui-cms-accordion eraAccordion multiple fade" style="width: 400px;" id="eraList">
<? $i = 0; 
   foreach ( $this->eras as $era ): 
   $zoneCopy = $eraCopy = $urlOptions;
   $eraCopy['controller'] = 'era'; 
   $eraCopy['action'] = 'delete';
   $zoneCopy['zone_era'] = $era['id'] ?> 
   <div class="yui-cms-item yui-panel <?= ($i == 0) ? "selected" : '' ?>" id="era_<?= $era['id']; ?>">
      <div class="hd"><a href="." class="accordionToggleItem"><?= $era['name']; ?></a></div>
      <div class="actions">
          <a href="#" class="accordionToggleItem">&nbsp;</a>
          <a href="#" onClick="return deleteRow('era', <?= $era['id'] ?>)" class="accordionRemoveItem action" title="click to remove">&nbsp;</a>
      </div>
      <div class="bd"<?= ($i++ == 0) ? ' style="height: auto;"' : '' ?>>
         <div class="addZone">
            <form id="zone" action="<?= $this->url($zoneCopy) ?>" onSubmit="return saveZone(this)" method="post">
               <span style="float: right"><input type="submit" value="+" name="eraSubmit" /></span>
               <span class="form"><?= $this->formText('zone_name', 'Add Zone', array('size' => 30, 'id' => 'era_' . $era['id'] . '_zone_name', 'onfocus' => "check_focus(this, 'Add Zone')", 'onblur' => "check_blur(this, 'Add Zone')")); ?></span>
            </form>
         </div>
         <div class="fixed" id="era_<?= $era['id']; ?>_zones">
<? foreach ( $era['zones'] as $cnt => $zone ):  ?>
            <div class="zone <?= $cnt % 2 ? 'even' : 'odd' ?>" id="zone_<?= $zone['id'] ?>">
               <span style="float: right"><a href="#" onclick="return deleteRow('zone', <?= $zone['id'] ?>)" ><img 
                 id="zone_<?=$zone['id']?>_img" src="/tools/images/delete_16.png" border="0" height="16" width="16" /></a> </span>
               <span><?= $zone['name'] ?></span>
            </div>
<? endforeach; ?>
         </div>
      </div>
   </div>
<? endforeach; ?>
</div>

<!--
   This is here soley to make adding new eras through AJAX simpler (and less complicated).
   Can you imagine creating this from scratch through the JS DOM? And I thought the 5 above lines
   was a lot of code. lol 
 -->
   <div class="yui-cms-item yui-panel " id="era_tmp" style="display: none">
      <div class="hd"><a href="." class="accordionToggleItem">{era name}</a></div>
      <div class="actions">
          <a href="#" class="accordionToggleItem">&nbsp;</a>
          <a href="#" onClick="return deleteRow('era', {eid}" class="accordionRemoveItem action" title="Click to delete">&nbsp;</a>

      </div>
      <div class="bd">
         <div class="addZone">
            <form id="zone" action="/admin/zone/add/zone_era/{eid}" onSubmit="return saveZone(this)" method="post">
               <span style="float: right"><input type="submit" value="+" name="eraSubmit" /></span>
               <span class="form"><input type="text" name="zone_name" id="era_{eid}_zone_name" value="Add Zone" size="30" onfocus="check_focus(this, 'Add Zone')" onblur="check_blur(this, 'Add Zone')" /></span>
            </form>
         </div>

         <div class="fixed" id="era_{eid}_zones">
         </div>
      </div>
   </div>
<!-- // End of JS short cut -->

